<template>
	<view class="cl_flex_page">
		<cl-nav-bar></cl-nav-bar>
		<uni-search-bar v-model="keyword" class="search_box" placeholder="请输入关键字查询" @input="handleSearch">
		</uni-search-bar>
		<cl-auto-page-list class="list_box" :list="filterTemplateList" ref="clAutoPageListRef">
			<template #list={list}>
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item,index) in list" :key="item.id" :autoClose="false"
						:right-options="rightOptions" style="margin-bottom: 20rpx;" @click="(e) => handleItemBtnClick(e, item)">
						<view class="list_box_item" @click="handleItemClick">
							<view v-html="highlightKeywords(item.name)" class="exceed_omit1"></view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</template>
		</cl-auto-page-list>
		<view class="cl_bottom_box">
			<view class="cl_bottom_box_btn" @click="handleAddTemplate">
				新增模板
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		getDirList
	} from '@/utils/file.js'
	import {
		linkSymbol,
		templateBasePath
	} from '@/config/file.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const FieldSetting = ref()
	const keyword = ref('')
	const rightOptions = [{
			text: '编辑',
			type: 'edit',
			style: {
				"backgroundColor": '#4c98f0',
			}
		},
		{
			text: '删除',
			type: 'del',
			style: {
				"backgroundColor": '#dd524d'
			}
		}
	]

	const allTemplateList = ref([])
	const filterTemplateList = ref([])
	const clAutoPageListRef = ref()

	onLoad(() => {
		getDirList().then(res => {
			console.log(res);
		})
	})
	// 获取列表数据
	const getList = async () => {
		let res = await getDirList()
		console.log(res, 'res');
	}
	// 高亮展示
	const highlightKeywords = (name) => {
		if (keyword.value.length === 0) {
			return `<span>${name}</span>`
		}
		const reg = new RegExp(keyword.value, 'g')
		return name.replace(reg, `<span style="color: red">${keyword.value}</span>`)
	}
	const handleSearch = (val) => {
		filterTemplateList.value = allTemplateList.value.filter(item => item.name.includes(val))
		clAutoPageListRef.value.reset()
	}

	// 去到新增模板
	const handleAddTemplate = () => {
		uni.navigateTo({
			url: '/pages/template/detail?type=add'
		})
	}
	// 点击模板项
	const handleItemClick = () => {
		console.log(123);
	}
	// 点击操作按钮
	const handleItemBtnClick = (e, item) => {
		const type = e.content.type
		if (type === 'edit') {
			uni.navigateTo({
				url: '/pages/template/detail?type=edit'
			})
		} else if (type === 'del') {

		}
	}

	// 删除模板
	const handleDelTemplate = () => {

	}
</script>

<style lang="scss" scoped>
	.search_box {
		background-color: $uni-bg-color;
	}

	.list_box {
		padding: 20rpx;
		box-sizing: border-box;
		flex: 1;
		overflow-y: auto;

		&_item {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: $uni-bg-color;
		}
	}
</style>